import React from 'react';
import {
  IonCard,
  IonCardContent,
  IonItem,
  IonAvatar,
  IonLabel,
  IonButton,
} from '@ionic/react';

interface UserInfoProps {
  username: string;
  accountId: string;
}

const UserInfo: React.FC<UserInfoProps> = ({ username, accountId }) => {
  return (
    <IonCard>
      <IonCardContent>
        <IonItem lines="none">
          <IonAvatar slot="start">
            <div className="avatar-placeholder">牙</div>
          </IonAvatar>
          <IonLabel>
            <h2>{username}</h2>
            <p>账号: {accountId}</p>
          </IonLabel>
          <IonButton fill="clear" slot="end">
            设置编辑
          </IonButton>
        </IonItem>
      </IonCardContent>
    </IonCard>
  );
};

export default UserInfo;